<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>

    <div class="box-tit" data-v-6e92ad55="">
      <span data-v-6e92ad55="">集水排水系统</span>
    </div>
    <div class="main ">

      <el-space wrap v-for="o in 5" :key="o">
        <el-card class="box-card ">
          <template #header>
            <div class="card-header">
              <span>{{ card_title[o - 1] }}</span>
            </div>
          </template>
          <img src="../../../assets/img/paishui.png" alt="" />
          <div class="runparameter">
            <span class="el-icon-s-operation"> 运行参数</span>
            <p>液位状态：<input type="text" v-model="todata.level" /></p>
            <p>运行状态：<input type="text" v-model="todata.state" /></p>
            <p>手/自动状态：<input type="text" v-model="todata.man_auto" /></p>

            <span class="el-icon-s-tools"> 控制设定</span>
            <p>
              启动设定:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

              <el-switch v-model="value[o]" active-color="#13ce66" inactive-color="#ff4949" active-value="1" active-text="启用" inactive-value="0" inactive-text="禁用" />
            </p>
          </div>
        </el-card>
      </el-space>
    </div>
    <!-- <div class="setup" v-show="setup">
      <p
        class="el-icon-error"
        style="float: right; margin: 1rem"
        @click="setup = false"
      ></p>
       <span style="  text-align: center;line-height: 18rem;">暂无权限</span>
    </div> -->
  </div>
</template>

<script>
import Header from "@/components/Header";
import EthreeVue from "@/components/Ethree.vue";

export default {
  components: {
    Header,
  },
  data() {
    return {
      title: "设备监控—给排水监控系统",
      setup: true,
      value: [],
      // level:'1',
      todata: {
        level: "低液位",
        state: "off",
        man_auto: "手动",
      },
      src: ["../../../assets/img/controler.png"],
      card_title: [
        "大机房排污泵",
        "西电梯排污泵",
        "消防泵房排污泵",
        "小机房排污泵",
        "东电梯排污泵",
      ],
    };
  },

  mounted() {},
  beforeUnmount() {},

  methods: {},
};
</script>


<style lang='less' scoped>
.bg {
  text-align: center;
}

.box-tit[data-v-6e92ad55] {
  height: 40px;
  line-height: 29px;
  width: 100%;
  font-size: 14px;
  color: #b8f9ff;
  padding-left: 39px;
  background: url()
    no-repeat;
  box-sizing: border-box;
  display: flex;
}
.box-tit[data-v-6e92ad55] span {
  margin-right: 200px;
}
.main {
  width: 100%;
  height: 90%;
  margin: auto;
  position: relative;
  span {
    color: rgb(150, 234, 255);
    margin: 1rem;
    font-size: 1.3rem;
    font-weight: bolder;
  }
  p {
    color: white;
    margin: 1rem;
    font-size: 1.3rem;
  }
  .box-card {
    background-color: rgba(71, 71, 71, 0.13);
    padding: 0;
    box-shadow: 0 0 10px rgb(150, 234, 255);
    margin-top: 2rem;
    margin: 2rem 1.2rem 0 0;
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;

    img {
      width: 90%;
    }
  }
}

.runparameter {
  width: 100%;
  height: 50%;
  margin: auto;
  margin-top: 2rem;
  span {
    font-size: 20px;
    margin: 1rem;
  }
  p {
    // float: left;
    text-align: left;
    width: 100%;
    margin: 1.2rem;
    input {
      float: right;
      border: none;
      outline: none;
      width: 6rem;
      margin-right: 2rem;
      font-size: 20px;
      color: white;
    }
  }
}

// .setup {
//   height: 20rem;
//   width: 30rem;
//   background-color: rgb(0, 26, 65);
//   color: rgb(111, 233, 255);
//   position: absolute;
//   top: 60%;
//   left: 50%;
//   margin-left: -15rem;
//   border: 2px solid rgb(160, 244, 255) ;
//   box-shadow: 0 0 10px rgb(160, 244, 255);
//   font-size: 30px;
//   border-radius: 1rem;
// }
</style>